<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>左侧导航</title>
    <%--<script src="<%=request.getContextPath()%>/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>--%>
    <style>
        .fa:before {
            line-height: 1
        }

        .m-aside-menu .m-menu__nav > .m-menu__item {
            height: auto;
        }

        .menu-display {
            display: block !important;
        }

        /*去掉滚动条*/
        .mCSB_draggerContainer {
            display: none;
        }
        #m_ver_menu ul{
            overflow: auto;
            padding-bottom: 84px;
            padding-top: 0;
        }
    </style>
</head>
<body>
<button class="m-aside-left-close  m-aside-left-close--skin-light " id="m_aside_left_close_btn">
    <i class="la la-close"></i>
</button>
<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-light ">
    <script id="demo" type="text/html">
        <div class="m-brand  m-brand--skin-light ">
            <a href="<%=request.getContextPath()%>" class="m-brand__logo" style="display:block;margin:10px 0;">
                <img alt="" src="<%=request.getContextPath()%>/assets/demo/demo7/media/img/logo/logo1.png"/>
            </a>
            <div style="text-align:center;font-weight:bold;">云检测系统</div>
        </div>
        <!-- END: Brand -->
        <!-- BEGIN: Aside Menu -->
        <div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-light m-aside-menu--submenu-skin-light "
             data-menu-vertical="true"
             m-menu-scrollable="true" m-menu-dropdown-timeout="500">
            <ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow">
                {{# layui.each(d.data, function(index, item){ }}
                <li class="m-menu__item  m-menu__item--submenu m-menu__item--submenu-fullheight" title="{{item.name}}"
                    aria-haspopup="true" m-menu-submenu-toggle="click"
                    m-menu-dropdown-toggle-class="m-aside-menu-overlay--on">
                    <a href="{{item.url}}" class="m-menu__link {{item.toggle}}">
                        <i class="menu-display m-menu__link-icon {{item.icon}}"></i>
                        <span class="m-menu__link-text" style="display:block;margin-top:1px;">
                            {{item.name}}
                        </span>
                        {{# if(item.menuList.length > 0){ }}
                        <i class="m-menu__ver-arrow la la-angle-right"></i>
                        {{# } }}
                    </a>
                    {{# if(item.menuList.length > 0){ }}
                    <div class="m-menu__submenu ">
                        <span class="m-menu__arrow"></span>
                        <div class="m-menu__wrapper">
                            <ul class="m-menu__subnav">
                                <li class="m-menu__item  m-menu__item--parent m-menu__item--submenu-fullheight"
                                    aria-haspopup="true">
									<span class="m-menu__link">
										<h4 class="m-menu__link-text">
											{{item.name}}
										</h4>
									</span>
                                </li>
                                {{# layui.each(item.menuList, function(index, item2){ }}
                                {{# if(item2.menuList.length > 0){ }}
                                <li class="m-menu__item  m-menu__item--submenu" aria-haspopup="true"
                                    m-menu-submenu-toggle="click" m-menu-submenu-mode="accordion">
                                    <a href="javascript:" class="m-menu__link m-menu__toggle">
                                                <span class="m-menu__link-text">
                                                    {{item2.name}}
                                                </span>
                                        <i class="m-menu__ver-arrow la la-angle-right"></i>
                                    </a>

                                    {{# if(item2.menuList.length > 0){ }}
                                    <div class="m-menu__submenu ">
                                        <span class="m-menu__arrow"></span>
                                        <ul class="m-menu__subnav">
                                            {{# layui.each(item2.menuList, function(index, item3){ }}
                                            <li class="m-menu__item " aria-haspopup="true" m-menu-link-redirect="1">
                                                <a href="{{item3.url}}" class="m-menu__link ">
                                                    <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                                                        <span></span>
                                                    </i>
                                                    <span class="m-menu__link-text">
                                                                {{item3.name}}
                                                            </span>
                                                </a>
                                            </li>
                                            {{# });}}
                                        </ul>
                                    </div>
                                    {{# } }}
                                </li>
                                {{# } else { }}
                                <li class="m-menu__item " aria-haspopup="true" m-menu-link-redirect="1">
                                    <a href="{{item2.url}}" class="m-menu__link ">
                                        <span class="m-menu__link-text">
                                                    {{item2.name}}
                                                </span>
                                    </a>
                                </li>
                                {{# } }}
                                {{# }); }}
                            </ul>
                        </div>
                    </div>
                    {{# } }}
                </li>
                {{# }); }}

            </ul>
        </div>
    </script>
    <script>
        /**
         * 获取菜单接口
         **/
        $.ajax({
            url: basePath + '/menu/loginmenu',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (json) {
                if (json.code === 'ok') {
                    if (json.data != null) {
                        rendMenu(json.data);
                    }
                } else {
                    layer.msg('获取菜单数据出错！' + json.msg, {
                            icon: 2, time: 0, closeBtn: true
                        }
                    );
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //通过XMLHttpRequest取得响应头，sessionstatus，
                var sessionstatus = jqXHR.getResponseHeader("sessionstatus");
                if(sessionstatus == "timeout") {
                    //如果超时就处理 ，指定要跳转的页面
                    window.open(basePath + '/loginPage', '_parent');
                } else {
                    layer.msg('获取菜单数据出错！' + jqXHR.status, {
                            icon: 2, time: 0, closeBtn: true
                        }
                    );
                }
            }
        });

        /**
         * 渲染菜单
         */
        function rendMenu(data) {
            var getTpl = demo.innerHTML;
            var view = document.getElementById('m_aside_left');
            var laytpl = layui.laytpl;
            rendSysMenuData(data.menuList);
            // rendMountMenuData('', data.mountMenuList);
            // var menuData = $.merge( $.merge([], data.menuList), data.mountMenuList);
            laytpl(getTpl).render({data: data.menuList}, function (html) {
                view.innerHTML = html;
            });
        }

        function rendSysMenuData(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i]['icon'] === undefined || data[i]['icon'] === '') {
                    data[i]['icon'] = 'flaticon-menu';
                }
                if (data[i].menuList != null) {
                    if (data[i].menuList.length > 0) {
                        data[i]['url'] = 'javascript:void(0);';
                        data[i]['toggle'] = 'm-menu__toggle';
                        rendSysMenuData(data[i].menuList);
                    } else if (data[i]['url'] == '') {
                        data[i]['url'] = 'javascript:void(0);';
                    } else {
                        data[i]['url'] = basePath + data[i]['url'];
                        data[i]['toggle'] = '';
                    }
                }
            }
        }

        function rendMountMenuData(baseUrl, data) {
            for (var i = 0; i < data.length; i++) {
                data[i]['icon'] = 'flaticon-menu';
                if (data[i].menuList != null) {
                    if (data[i].menuList.length > 0) {
                        rendMountMenuData(data[i]['url'], data[i].menuList);
                        data[i]['url'] = 'javascript:void(0);';
                        data[i]['toggle'] = 'm-menu__toggle';
                    } else if (data[i]['url'] == '') {
                        data[i]['url'] = 'javascript:void(0);';
                    } else {
                        if (Cookies.get("HCID") !== undefined && Cookies.get("HCID") !== '') {
                            data[i]['url'] = baseUrl + data[i]['url'] + "?HCID=" + Cookies.get("HCID");
                        }
                        data[i]['toggle'] = '';
                    }
                }
            }
        }
    </script>
</div>
<div class="m-aside-menu-overlay"></div>
</body>
</html>